import { defineAsyncComponent } from 'vue';
import { VxeUI } from '@/config/vxe/index.ts';
import { NSwitch } from 'naive-ui/es/switch';
const SvgIcon = defineAsyncComponent(() => import('@/components/customComponents/icon/SvgIcon.vue'));
VxeUI.renderer.add('n-switch', {
	renderTableDefault(renderOpts, params) {
		const { row, $rowIndex, column } = params;
		const { events, props } = renderOpts;
		const checkedSlot = props!.slots?.checked ? props!.slots.checked : null;
		const uncheckedSlot = props!.slots?.unchecked ? props!.slots.unchecked : null;
		// 模版
		let checkedIconTemplate;
		if (props!.slots?.checkedIcon) {
			checkedIconTemplate = <SvgIcon iconType={props?.slots.checkedIcon.type}
										   iconClass={props?.slots.checkedIcon.name}/>;
		}
		const checkedIconSlot = props!.slots?.checkedIcon ? checkedIconTemplate : null;
		// 模版
		let uncheckedIconTemplate;
		if (props!.slots?.uncheckedIcon) {
			uncheckedIconTemplate = <SvgIcon iconType={props!.slots.uncheckedIcon.type}
											 iconClass={props!.slots.uncheckedIcon.name}/>;
		}
		const uncheckedIconSlot = props!.slots?.uncheckedIcon ? uncheckedIconTemplate : null;
		return [
			<NSwitch v-model:value={row[column.field]} size={props!.size}
					 disabled={props!.disabled}
					 loading={props!.loading}
					 round={props!.round}
					 rubberBand={props!.rubberBand}
					 checkedValue={props!.checkedValue}
					 uncheckedValue={props!.uncheckedValue}
					 onUpdate:value={() => events!.toggleEvent(row)}>
				{{
					checked          : () => (checkedSlot),
					unchecked        : () => (uncheckedSlot),
					'checked-icon'   : () => (checkedIconSlot),
					'unchecked-icon' : () => (uncheckedIconSlot)
				}}
			</NSwitch>
		];
	}
});